<template>
  <div>
    <div class="article-container">
      <div class="daohang">
        个人中心
      </div>
    </div>
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="2" :offset="2">
          <span>姓名:</span>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.userName" disabled></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="2" :offset="2">
          <span>维修区域:</span>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.expand2" disabled></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="2" :offset="2">
          <span>专业:</span>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.profession" disabled></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="2" :offset="2">
          <el-button type="primary" @click="changeMajor">修改专业</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 修改专业对话框 -->
    <el-dialog v-model="changeMajorDialogVisible" width="30%">
      <el-form>
        <el-form-item label="新专业:">
          <el-input v-model="newMajor"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeMajorDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmChangeMajor">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: {
        userName: '',
        expand2: '',
        profession: ''
      },
      changeMajorDialogVisible: false,
      newMajor: ''
    };
  },
  methods: {
    navigateTo(path) {
      window.location.href = path;
    },
    fetchUserInfo() {
      const userId = localStorage.getItem('userId');
      axios.get('/user/user/selectOneEmployeeInfo', {params: {userId: userId}})
          .then(response => {
            this.userInfo = response.data.data;
          })
          .catch(error => {
            console.error('获取用户信息失败:', error);
          });
    },
    changeMajor() {
      this.changeMajorDialogVisible = true;
    },
    confirmChangeMajor() {
      // 在这里实现修改专业的逻辑
      const token = localStorage.getItem('token');
      const data = new FormData();
      data.append('profession', this.newMajor);
      axios.post('/user/employeeInfo/updateEmployeeInfo', data, {
        headers: {
          'token': token
        }
      })
          .then(response => {
            console.log(response.data);
            this.$message.success('修改专业成功');
            this.fetchUserInfo(); // 重新获取用户信息
          })
          .catch(error => {
            console.error('修改专业失败:', error);
            this.$message.error('修改专业失败');
          });
      this.changeMajorDialogVisible = false;
    }
  },
  mounted() {
    this.fetchUserInfo();
  }
};
</script>

<style scoped>
.article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-top: 110px;
}

.daohang {
  width: 83%;
  text-align: left;
  border-bottom: 1px solid #00000017;
  background: url(../assets/img/icon-location-blue.png) no-repeat 0 8px;
  background-position: 0px, -12px; /* 调整位置 */
  padding-left: 20px;
}

.daohang > a {
  color: #0000004d;
}

.daohang > span {
  color: #0000004d;
}

.user-info {
  text-align: left;
  margin-top: 20px;
}

.user-info h2 {
  margin-top: 0;
}

.user-info p {
  margin: 10px 0;
}
.search-bar {
  width: 100%;
  margin-bottom: 15px;
}

</style>
